﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>小小的聊天室</title>
<link rel="icon" href="/img/chat.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="/static/css/chatroom.css">
<link rel="stylesheet" type="text/css" href="/static/css/common/layui.css">
<link rel="stylesheet" type="text/css" href="/static/css/common/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/common/fileinput.min.css">
</head>
<body>
<div id="app" class="qqBox">
    <div class="BoxHead">
        <div class="headImg">
            <img id="avatarUrl" src=""/>
        </div>
        <div id="username" class="internetName"></div>
        <button class="close logout" onclick="logout()">&times;</button>
    </div>
    <div class="context">
        <div class="conLeft">
            <ul>

            </ul>
        </div>
        <div class="conRight">
            <div class="Righthead">
                <div class="headName"></div>
            </div>
            <div class="RightCont">
                <ul class="newsList-temp"></ul>
                <ul class="newsList">

                </ul>
            </div>
            <div class="RightFoot">
                <div class="emjon">
                    <ul>
                        <li><img src="/static/img/emoji/emoji_01.png"></li>
                        <li><img src="/static/img/emoji/emoji_02.png"></li>
                        <li><img src="/static/img/emoji/emoji_03.png"></li>
                        <li><img src="/static/img/emoji/emoji_04.png"></li>
                        <li><img src="/static/img/emoji/emoji_05.png"></li>
                        <li><img src="/static/img/emoji/emoji_06.png"></li>
                        <li><img src="/static/img/emoji/emoji_07.png"></li>
                        <li><img src="/static/img/emoji/emoji_08.png"></li>
                        <li><img src="/static/img/emoji/emoji_09.png"></li>
                        <li><img src="/static/img/emoji/emoji_10.png"></li>
                        <li><img src="/static/img/emoji/emoji_11.png"></li>
                        <li><img src="/static/img/emoji/emoji_12.png"></li>
                        <li><img src="/static/img/emoji/emoji_13.png"></li>
                        <li><img src="/static/img/emoji/emoji_14.png"></li>
                        <li><img src="/static/img/emoji/emoji_15.png"></li>
                        <li><img src="/static/img/emoji/emoji_16.png"></li>
                        <li><img src="/static/img/emoji/emoji_17.png"></li>
                        <li><img src="/static/img/emoji/emoji_18.png"></li>
                        <li><img src="/static/img/emoji/emoji_19.png"></li>
                        <li><img src="/static/img/emoji/emoji_20.png"></li>
                        <li><img src="/static/img/emoji/emoji_21.png"></li>
                        <li><img src="/static/img/emoji/emoji_22.png"></li>
                        <li><img src="/static/img/emoji/emoji_23.png"></li>
                        <li><img src="/static/img/emoji/emoji_24.png"></li>
                    </ul>
                </div>
                <div class="footTop">
                    <ul>
                        <li class="ExP">
                            <img src="/static/img/emoji.jpg">
                        </li>
                        <li class="file-upload">
                            <a data-toggle="modal" data-target="#upload-modal" data-backdrop="">
                                <img  src="/static/img/upload.jpg">
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="inputBox">
                    <input id="toUserId" type="hidden">
                    <input id="toGroupId" type="hidden">
                    <input id="groupType" type="hidden">
                    <textarea id="dope" style="width: 99%;height: 75px; border: none;outline: none;" name="" rows="" cols=""></textarea>
                    <button title="按下回车可发送" class="sendBtn">发送</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="upload-modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h3 class="modal-title text-primary">文件上传</h3>
                </div>
                <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">选择文件</label>
                        <div class="col-sm-9">
                            <input type="file" name="file"
                                class="col-sm-9 myfile" />
                            <p class="help-block">注意：文件大小不超过30M，有效期为7天</p>
                        </div>
                    </div>
                </form>
                </div>
                <div class="modal-footer">
                        <button id="upload-cancel" class="btn btn-sm btn-muted" data-dismiss="modal">
                        <i class="glyphicon glyphicon-remove"></i> 取消
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>


<script type="text/javascript" src="/static/js/common/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/static/js/common/jquery.actual.min.js"></script>
<script type="text/javascript" src="/static/js/common/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/common/fileinput.min.js"></script>
<script type="text/javascript" src="/static/js/common/zh.js"></script>
<script type="text/javascript" src="/static/js/common/socket.io.js"></script>
<script type="text/javascript" src="/static/js/im.js"></script>
<script type="text/javascript" src="/static/js/chatroom.js"></script>
<script type="text/javascript">
    var userId;
    var sentMessageMap;
    var ws;
    var roomIds = []
    $(function () {


        ws = new IM_SOCKET(function (clientId) {
            // 注册成功回调
            setUserInfo();
            setSentMessageMap();
        })
        // 绑定接收消息事件
        ws.on(IM_EVENT.SEND_MSG_EVENT, function (data) {
            if(1 == data.groupType) {
                // 获取、构造参数
                var fromUserId = data.fromUserId;
                var content = data.msg;
                var toGroupId = data.toGroupId;
                var fromAvatarUrl;
                var $receiveLi;
                $('.conLeft').find('span.hidden-userId').each(function(){
                    if (this.innerHTML == fromUserId) {
                        fromAvatarUrl = $(this).parent().parent().find('img').attr("src");
                        $receiveLi = $(this).parent(".liRight").parent("li");
                    }
                })
                $('.conLeft').find('span.hidden-groupId').each(function(){
                    if ($(this).text() == toGroupId) {
                        $receiveLi = $(this).parent(".liRight").parent("li");
                    }
                })
                var answer='';
                answer += '<li>' +
                    '<div class="answers">'+ content +'</div>' +
                    '<div class="answerHead"><img src="' + fromAvatarUrl + '"/></div>' +
                    '</li>';

                // 消息框处理
                processMsgBox.receiveGroupMsg(answer, toGroupId);
                // 好友列表处理
                processFriendList.receiving(content, $receiveLi);
            }
            if(2 == data.groupType) {
                // 获取、构造参数
                var fromUserId = data.fromUserId;
                var toGroupId = data.toGroupId;
                var content = data.msg;
                var fromAvatarUrl;
                var $receiveLi;
                $('.conLeft').find('span.hidden-userId').each(function(){
                    if ($(this).text() == fromUserId) {
                        fromAvatarUrl = $(this).parent().parent().find('img').attr("src");
                    }
                })
                $('.conLeft').find('span.hidden-groupId').each(function(){
                    if ($(this).text() == toGroupId) {
                        $receiveLi = $(this).parent(".liRight").parent("li");
                    }
                })
                var answer='';
                answer += '<li>' +
                    '<div class="answers">'+ content +'</div>' +
                    '<div class="answerHead"><img src="' + fromAvatarUrl + '"/></div>' +
                    '</li>';
                // 消息框处理
                processMsgBox.receiveSingleMsg(answer, fromUserId);
                // 好友列表处理
                processFriendList.receiving(content, $receiveLi);
            }
        });
    })
</script>


</body>
</html>
